<template>

    <DocumentReaderContainer>
        <div class="document-reader-parser-container">
            <ReaderHeader 
                :currentTaskInfo="currentTaskInfo"
                :currentSceneInfo="currentSceneInfo" />
            <el-row>
                <el-col :span="12">
                    <div class="document-wrapper" v-loading="loadingDocument">
                        <VuePdf :src="pdfSrc" class="pdf-page" />
                    </div>
                </el-col>
                <el-col :span="12" class="document-reader-tab" >
                    <!-- 聊天面板-->
                    <div>
                        <ReaderTabPanel ref="readerTabPanelRef" 
                            :currentTaskInfo="currentTaskInfo"
                            :currentSceneInfo="currentSceneInfo" />
                    </div>
                </el-col>
            </el-row>
        </div>
    </DocumentReaderContainer>
</template>

<script setup>

import { useRouter } from 'vue-router'

import VuePdf from './components/VuePdf.vue'
import ReaderHeader from './components/ReaderHeader.vue'

const router = useRouter()
const route = useRoute()

import ReaderTabPanel from './readerTab'
import DocumentReaderContainer from './documentReaderContainer'

import {
    getScene ,
    getPreviewDocxUrl
} from '@/api/base/im/scene/documentReader';

import {
    getTask , 
} from '@/api/base/im/scene/documentReaderTask';

const pdfSrc = ref('http://data.linesno.com/demo.pdf')
const sceneId = ref(route.query.sceneId)
const taskId = ref(route.query.taskId)

const currentSceneInfo = ref({});
const currentTaskInfo = ref({});
const loadingDocument = ref(true)
const contentRef = ref(null)
const readerTabPanelRef = ref(null)

// 获取文档内容
const getDocxContentUrl = async () => {
    try {
        loadingDocument.value = true;
        const response = await getPreviewDocxUrl(taskId.value);

        console.log('response.data: ' + response.data); // 打印数据内容'

        pdfSrc.value = response.data;

        loadingDocument.value = false;
        console.log('文档渲染成功');
    } catch (error) {
        console.error('获取或渲染文档失败', error);
    }
}

// 获取场景信息
const handleGetScene = () => {
    getScene(sceneId.value).then(res => {
        currentSceneInfo.value = res.data;
    })
}

// 获取任务信息
const handleGetTask = () => {
    getTask(taskId.value).then(res => {
        currentTaskInfo.value = res.data;
    })
}

// 页面加载完成
onMounted(() => {
    handleGetScene();
    handleGetTask() ;

    nextTick(() => {
        getDocxContentUrl()
    })
})


</script>

<style lang="scss" scoped>

.document-reader-tab{
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
}

</style>
